<template>
	<view class="popup-container" v-if="visible">
		<view class="popup-mask" @click="close"></view>
		<view class="popup-page">
			<!-- 标题-->
			<view class="popup-page-title" v-if="title && title != ''">
				{{title}}
			</view>
			<!-- 内容区域 -->
			<picker-view class="popup-page-pickerview" :indicator-class="indicatorClass" :value="checkedDate"
				@change="changeValue">
				<picker-view-column v-for="(f_list, f_index) in data" :key="f_index">
					<view class="item" v-for="(item,index) in f_list" :key="index">
						{{item + (f_index == 0 ? '点' : f_index == 1 ? '分' : '秒')}}
					</view>
				</picker-view-column>
			</picker-view>
			<!-- 确定按钮 -->
			<view class="popup-page-opt">
				<button class="optBtn" @click="selectedValue">确 定</button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		watch
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'

	// 定义组件的 props
	const props = defineProps({
		/**
		 * @param {Array} 默认选中项数组下标
		 */
		modelValue: {
			type: Array, // 任意类型
			default: []
		},
		title: {
			type: String,
			default: ''
		},
		indicatorClass: {
			type: String,
			default: ''
		}
	});

	// 定义 emit 事件
	const emit = defineEmits(['update:modelValue', 'change']);

	const visible = ref(false); // 控制弹窗的显示状态
	const checkedDate = ref([0, 0, 0]); // 默认选中项数组下标
	const data = ref([]); // 时间数值

	onLoad(() => {
		let h = []
		let m = []
		let s = []
		for (let i = 0; i < 24; i++) {
			h.push(i)
		}
		for (let i = 0; i < 60; i++) {
			m.push(i)
		}
		for (let i = 0; i < 60; i++) {
			s.push(i)
		}

		if (props.modelValue.length == 1) {
			checkedDate.value = [Number(props.modelValue[0])]
			data.value = [h]
		} else if (props.modelValue.length == 2) {
			checkedDate.value = [Number(props.modelValue[0]), Number(props.modelValue[1])]
			data.value = [h, m]
		} else if (props.modelValue.length == 3) {
			checkedDate.value = [
				Number(props.modelValue[0]),
				Number(props.modelValue[1]),
				Number(props.modelValue[2])
			]
			data.value = [h, m, s]
		} else {
			checkedDate.value = [0, 0, 0]
			data.value = [h, m, s]
		}
	});


	// 打开弹窗
	const open = () => {
		visible.value = true
		if (props.modelValue.length == 1) {
			checkedDate.value = [Number(props.modelValue[0])]
		} else if (props.modelValue.length == 2) {
			checkedDate.value = [Number(props.modelValue[0]), Number(props.modelValue[1])]
		} else if (props.modelValue.length == 3) {
			checkedDate.value = [
				Number(props.modelValue[0]),
				Number(props.modelValue[1]),
				Number(props.modelValue[2])
			]
		} else {
			checkedDate.value = [0, 0, 0]
		}
	}

	// 关闭弹窗
	const close = () => {
		visible.value = false

	}

	/**
	 * picker-view 改变值事件
	 */
	const changeValue = (e) => {
		let result = []
		for (let i = 0; i < data.value.length; i++) {
			result.push(String(e.detail.value[i]).padStart(2, '0'))
		}
		checkedDate.value = result
	}

	/**
	 * 确认选中值
	 */
	const selectedValue = () => {
		close()
		emit('update:modelValue', checkedDate.value);
		emit('change', checkedDate.value)
	}

	// 暴露方法给父组件
	defineExpose({
		open,
		close
	});
</script>

<style scoped>
	.popup-container {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 1000;
	}

	.popup-mask {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.2);
	}

	.popup-page {
		position: absolute;
		margin: auto;
		width: 520rpx;
		border-radius: 30rpx;
		padding: 40rpx 50rpx;
		background-color: #fff;
		box-shadow: 0 0 20rpx 4rpx rgba(136, 136, 136, 0.2);
	}

	.popup-page-title {
		margin-bottom: 24rpx;
		text-align: center;
		font-size: 36rpx;
	}

	.popup-page-pickerview {
		height: 520rpx;
		padding: 0 40rpx;
	}

	.item {
		line-height: 80rpx;
		text-align: center;
	}

	.popup-page-opt {
		margin-top: 34rpx;
	}

	.optBtn {
		width: 200rpx;
		margin: 0 auto;
		padding: 0 20rpx;
		height: 50rpx;
		line-height: 50rpx;
		font-size: 34rpx;
		background: transparent;
		border: none;
	}
</style>